import { Component } from 'react';
import { View, Image, Text } from '@tarojs/components';
import { AtButton } from 'taro-ui';
import EmptyContent from '@/components/EmptyContent';
import EmptyIcon from '@/assets/images/cart/empty.png';
import CartItem from './components/CartItem/index';
import BottomBtn from './components/BottomBtn';
import './index.scss';

export default class Index extends Component {
  state = {
    totalPrice: 0,
    editMode: false,
    isAllSelected: false,
    shopInfo: {
      id: 1,
      logo: 'https://img.txqn.huohua.cn/material/20224845346bacc3b69-8c07-4b1b-a16d-a62bedf9cda5.jpg',
      name: '卡西欧',
    },
    cartList: [
      {
        imageUrl:
          'https://img.txqn.huohua.cn/material/20224845346bacc3b69-8c07-4b1b-a16d-a62bedf9cda5.jpg',
        goodsName: '朝阳区养老护理康复理疗服务缓解肩颈炎疼痛感100...',
        goodsPrice: 10000,
        goodsSku: '40枚',
        count: 1,
        isSelected: false,
        id: 1,
      },
      {
        imageUrl:
          'https://img.txqn.huohua.cn/material/20224845346bacc3b69-8c07-4b1b-a16d-a62bedf9cda5.jpg',
        goodsName: '朝阳区养老护理康复理疗服务缓解肩颈炎疼痛感100',
        goodsPrice: 19900,
        goodsSku: '40枚',
        count: 1,
        isSelected: true,
        id: 2,
      },
      {
        imageUrl:
          'https://img.txqn.huohua.cn/material/20224845346bacc3b69-8c07-4b1b-a16d-a62bedf9cda5.jpg',
        goodsName: '朝阳区养老护理康复理疗服务缓解肩颈打发撒旦法师打发撒旦法炎疼痛感100',
        goodsPrice: 19900,
        goodsSku: '40枚',
        isSelected: false,
        count: 1,
        id: 3,
      },
    ],
  };
  componentDidMount = async () => {
    this.completeTotalPrice();
  };

  completeTotalPrice = () => {
    let list: any[] = this.state.cartList.filter((item) => item.isSelected);
    let price = 0;
    list.forEach((item) => {
      price += item.goodsPrice * item.count;
    });
    this.setState({
      totalPrice: price,
    });
  };

  onCartChange = (id: number, value: boolean) => {
    let list: any[] = [...this.state.cartList];
    let allSelect: boolean = false;
    list.forEach((cart: any) => {
      if (cart.id === id) {
        cart.isSelected = value;
      }
    });
    if (list.every((item) => item.isSelected === true)) {
      allSelect = true;
    } else {
      allSelect = false;
    }
    this.setState({
      cartList: list,
      isAllSelected: allSelect,
    });
    this.completeTotalPrice();
  };

  onCartCountChange = (id: number, count: number) => {
    console.log(id, count);
    let list: any[] = [...this.state.cartList];
    list.forEach((cart: any) => {
      if (cart.id === id) {
        cart.count = count;
      }
    });
    this.setState({
      cartList: list,
    });
    this.completeTotalPrice();
  };

  changeMode = () => {
    this.setState({
      editMode: !this.state.editMode,
    });
  };

  // 全选
  onAllSelect = (value: boolean) => {
    let list: any[] = [...this.state.cartList];
    list.forEach((item) => {
      item.isSelected = value;
    });
    this.setState({
      cartList: list,
      isAllSelected: value,
    });
    this.completeTotalPrice();
  };

  render() {
    const { cartList, shopInfo, totalPrice, editMode, isAllSelected } = this.state;
    return (
      <View className="home-wrap">
        {cartList.length === 0 ? (
          <View className="empty-container">
            <EmptyContent
              offsetTop={300}
              image={EmptyIcon}
              imageWidth="344rpx"
              imageHeight="204rpx"
              title="购物车空空如也"
            />
            <AtButton>去逛逛</AtButton>
          </View>
        ) : (
          <View>
            <View className="shop-container">
              <View className="shop-info">
                <Image src={shopInfo.logo} />
                <Text>{shopInfo.name}</Text>
              </View>
              <View className="edit-btn" onClick={this.changeMode}>
                {editMode ? '完成' : '编辑'}
              </View>
            </View>
            <View className="cart-list">
              {cartList.map((item) => {
                return (
                  <CartItem
                    key={item.id}
                    cart={item}
                    onSelectChange={(value: boolean) => this.onCartChange(item.id, value)}
                    onCountChange={(count: number) => this.onCartCountChange(item.id, count)}
                  />
                );
              })}
            </View>
            <BottomBtn
              editMode={editMode}
              totalPrice={totalPrice}
              onSelect={this.onAllSelect}
              isAllSelected={isAllSelected}
            />
          </View>
        )}
      </View>
    );
  }
}
